{extend name="public/common"}

{block name="style"}
<title></title>
<link rel="stylesheet" href="/home/css/details-template/detail.css">
<style>

</style>
{/block}
{block name="body"}
<div id="refreshContainer"  class="scroll" style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:1rem; right:0" >
    <div class="article">
        <div class="title"><p>{$detail.title}</p></div>
        <div class="note clear">
            <span class="publish">{$detail.publisher}</span>
            <span class="time">{$detail.create_time|time_format="Y-m-d"}</span>
        </div>
        <div class="content">
            <div class="article-content">{$detail.content}</div>
            <div class="like">
                <span class="read">{$detail.views}</span>
                {eq name="visit" value="0"}
                {eq name="detail.is_like" value="1"}
                <span class="isgood good_"  data-type="2" data-id="{$detail.id}" onclick="isGood(this,1,{$detail.id})">{$detail.likes}</span>
                {else/}
                <span class="isgood good"  data-type="2" data-id="{$detail.id}" onclick="isGood(this,1,{$detail.id})">{$detail.likes}</span>
                {/eq}
                {else/}
                <span class="isgood good">{$detail.likes}</span>
                {/eq}
            </div>
        </div>
    </div>
    <div class="comment">
        <div class="sum">共<span>{$detail.comments}</span>条评论</div>
        <div class="lists">
            {volist name="comment" id="co"}
            <div class="list clear">
                <div class="fl">
                    <img src="{$co.header}" alt="用户" class="user">
                </div>
                <div class="fl mid">
                    <div class="name limit">{$co.nickname}</div>
                    <div class="content" >{$co.content}</div>
                    <div class="time">{$co.create_time|time_format="Y-m-d"}</div>
                </div>
                {eq name="visit" value="0"}
                {eq name="co.is_like" value="1"}
                <div class="fr isgood good_"  data-type="0" data-id="{$co.id}" onclick="isGood(this,0,{$co.id})">{$co.likes}</div>
                {else/}
                <div class="fr isgood good"  data-type="0" data-id="{$co.id}" onclick="isGood(this,0,{$co.id})">{$co.likes}</div>
                {/eq}
                {else/}
                <div class="fr isgood good">{$co.likes}</div>
                {/eq}
            </div>
            {/volist}
        </div>
        <div class="tip"></div>
        <div class="loading hidden">
            <div class="typing_loader"></div>
        </div>
    </div>
</div>
{eq name="visit" value="0"}
<div class="bottom clear" onclick="send(this,1,{$detail['id']})">
    <div class="myword fl">
        <input type="text" placeholder="说说你的感想！" id="send" disabled>
    </div>
</div>
{/eq}

{/block}

{block name="script"}
<script src="/home/js/reset.js"></script>
<script>
    var type = '{$detail.type}';
    if(type==1){
        $("title").text("村规民约");
    }else if(type==2){
        $("title").text("政策法规");
    }
        console.log('Hello World');
    $(function(){
        var len = $(".lists .list" ).length;
        if(len >= 12){
            $('.tip' ).text('上拉加载更多');
            document.getElementById("refreshContainer").addEventListener('scroll',handleScroll);
        };
    });
    var scrollNow = true;
    var handleScroll = function() {
        var el = document.getElementById("refreshContainer");
        if(el.scrollTop + el.offsetHeight >= el.scrollHeight && scrollNow){
            scrollNow = false;
            var len = $(".lists .list" ).length;
            var tip = $(".tip");
            var loading = $('.loading');
            var id = {$detail['id']};
            $.ajax({
                type:"post",
                url:"{:Url('Base/morecomment')}",
                data:{
                    type:1,
                    aid:id,
                    length:len
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success:function(data){
                    loading.toggleClass('hidden');
                    tip.show();
                    if(data.code == 1){
                        addComment(data);
                        var dataLen =data.data.length;
                        if(data.data.length == 12){
                            tip.text('上拉加载更多');
                        }
                    }else{
                        tip.text('没有更多了');
                        document.getElementById("refreshContainer").removeEventListener('scroll',handleScroll);
                    }
                    scrollNow = true;
                }
            })
        }
    }

    //发送评论
    var send = function(e,type,id){
        swal({
                title: "",
                text: "请输入评论内容！",
                type: "input",
                showCancelButton: true,
                animation: "slide-from-top",
                inputPlaceholder: "（300字以内）",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                closeOnConfirm: false
            },
            function(inputValue){
                if (inputValue === false) {
                    return false
                }else if (inputValue === "")
                {
                    swal.showInputError("请输入评论");
                    return false
                }else if(inputValue.length>300){
                    swal.showInputError("评论不得多于300字");
                }else{
                    $.ajax({
                        type:"post",
                        url:"{:Url('Base/comment')}",
                        data:{
                            type:type,
                            aid:id,
                            content:inputValue
                        },
                        beforeSend:function(){
                            swal({
                                title: ' ',
                                text: '评论提交中...',
                                showConfirmButton:false
                            });
                        },
                        success:function(msg){
                            var data = msg.data;
                            var userid = "'"+data.create_user+"'";
                            var html = '';
                            html += '<div class="list clear">' +
                                '<div class="fl">' +
                                '<img src="' + data.header + '" alt="用户头像" class="user">' +
                                '</div>' +
                                '<div class="fl mid">' +
                                '<div class="name limit">' + data.nickname + '</div>' +
                                '<div class="content">' + inputValue + '</div>' +
                                '<div class="time">' + data.time + '</div>' +
                                '</div>' +
                                '<div class="fr isgood good"  onclick="isGood(this,0,'+data.id+')">' + data.likes + '</div>' +
                                '</div>';
                            $('.lists' ).prepend(html);
                            inputValue="";
                            var sum = $('.sum span' );
                            sum.text(parseInt(sum.text())+1);
                            swal({
                                title: ' ',
                                text: '评论成功',
                                type: 'success',
                                confirmButtonText:'确定',
                                timer:1500
                            });
                        }
                    });
                }
            });
    };

    //点赞
    var isGood = function(e,type,id){
        //样式变化，移到suc
        var n = $(e ).text();
        $(e).toggleClass('good' ).toggleClass('good_');
        $(e ).hasClass('good')?n--:n++;
        $(e ).text(n);
        //type：1文章，2评论
//	var type = $(e ).hasClass('fr')?2:1;
        $.ajax({
            type:"post",
            url:"{:Url('Base/like')}",
            data:{
                type:type,
                aid:id,
            },
            success:function(data){
            }
        })
    };

    //添加评论
    function addComment(data){
        //is_like : 1为已点赞 0为未点赞
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            var userid = "'"+list.create_user+"'";
            html += '<div class="list clear">' +
                '<div class="fl">' +
                '<img src="' + list.header + '" alt="用户" class="user">' +
                '</div>' +
                '<div class="fl mid">' +
                '<div class="name limit">' + list.nickname + '</div>' +
                '<div class="content">' + list.content + '</div>' +
                '<div class="time">' + list.time + '</div>' +
                '</div>';
            if ("{$visit}" == 0){
                if(list.is_like == 0){
                    html+='<div class="fr isgood good"  onclick="isGood(this,0,'+list.id+')">'+list.likes+'</div>'
                }else{
                    html+='<div class="fr isgood good_" onclick="isGood(this,0,'+list.id+')">'+list.likes+'</div>'
                }
            }else {
                html+='<div class="fr isgood good">'+list.likes+'</div>'
            }
            html+=
                '</div>';
        }
        $(".lists").append(html);
    }

    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                , totalScroll = el.scrollHeight
                , currentScroll = top + el.offsetHeight
            //If we're at the top or the bottom of the containers
            //scroll, push up or down one pixel.
            //
            //this prevents the scroll from "passing through" to
            //the body.
            if(top === 0) {
                el.scrollTop = 1
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1
            }
        })
        el.addEventListener('touchmove', function(evt) {
            //if the content is actually scrollable, i.e. the content is long enough
            //that scrolling can occur
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true
        })
    }
    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
        //In this case, the default behavior is scrolling the body, which
        //would result in an overflow.  Since we don't want that, we preventDefault.
        if(!evt._isScroller) {
            evt.preventDefault()
        }
    });


</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

</script>
{/block}